<script setup lang="ts">
import useAppStore from '@/stores/modules/app'
import NavBar from './components/NavBar.vue'
import TabBar from './components/TabBar.vue'

const router = useRouter()

const appStore = useAppStore()
const { theme } = storeToRefs(appStore)

const keepAliveRoutes = computed(() => {
  const keepAliveNames: string[] = []
  for (const route of router.options.routes) {
    if (typeof route.name === 'string' && route.meta?.keepAlive) {
      keepAliveNames.push(route.name)
    }
  }
  return keepAliveNames
})

const transitionName = computed(() => {
  const route = router.currentRoute.value
  return typeof route.meta.transition === 'string' ? route.meta.transition : 'slide-forward'
})
</script>

<template>
  <van-config-provider :theme="theme">
    <NavBar />
    <router-view v-slot="{ Component, route }">
      <transition :name="transitionName">
        <keep-alive :include="keepAliveRoutes">
          <component class="component-view" :is="Component" :key="route.name" />
        </keep-alive>
      </transition>
    </router-view>
    <TabBar />
  </van-config-provider>
</template>

<style lang="scss" scoped></style>
